<template>
    <div>
        <a-modal
                title="登录"
                width="500px"
                :visible = "visible"
                okText = '登录'
                cancelText = '取消'
                centered
                :confirm-loading="confirmLoading"
                @ok="login"
                @cancel="handleCancel"
        >
            <a-form
                    id="components-form-demo-normal-login"
                    :form="form"
                    class="login-form"
                    @submit="login"
            >
                <a-form-item
                        :label-col="{ span: 4 }"
                        :wrapper-col="{ span: 20 }"
                        label="手机号">
                    <a-row :gutter="8">
                        <a-col :span="12">
                            <a-input v-decorator="[
                              'tel',
                              { rules: [ { required: true, message : '请输入您的手机号'},{ pattern: /1[3-9]\d{9}/, message: '手机号格式不正确' }] },
                            ]"
                                     placeholder="请输入您的手机号">
                            </a-input>
                        </a-col>
                    </a-row>
                </a-form-item>
                <a-form-item
                        :label-col="{ span: 4 }"
                        :wrapper-col="{ span: 20 }"
                        label="验证码"
                >
                    <a-row :gutter="8">
                        <a-col :span="12">
                            <a-input
                                    v-decorator="[
                                      'verify_code',
                                      { rules: [{ required: true, message: '验证码不能为空' }] },
                                    ]"
                            />
                        </a-col>
                        <a-col :span="12">
                            <a-button :disabled="codeFetchSuccess === true" :loading="codeFetchLoading" @click="loginCode">{{ codeFetchDesc }}</a-button>
                        </a-col>
                    </a-row>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>
<script>
    export default {
        props: {
            visible: Boolean,
        },
        data() {
            return {
                confirmLoading: false,
                codeFetchSuccess : false,
                codeFetchLoading : false,
                codeFetchDesc : '获取验证码',
                form: this.$form.createForm(this, { name: 'dynamic_rule' }),
            };
        },
        methods: {
            async loginCode(){
                let tel = await this.form.validateFields(['tel']);
                this.codeFetchLoading = true;
                let ok = await this.$post('api/user/verify-login-code', tel);
                this.codeFetchLoading = false;
                if(ok){
                    let _this = this;
                    let time  = 60;
                    this.codeFetchSuccess = true;
                    _this.codeFetchDesc = "重新获取("+time+"s)";
                    let i = setInterval(function () {
                        time--;
                        _this.codeFetchDesc = "重新获取("+time+"s)";
                        if(time === 0){
                            _this.codeFetchSuccess = false;
                            _this.codeFetchDesc = "获取验证码";
                            clearInterval(i)
                        }
                    }, 1000);
                }
            },
            async login() {
                try{
                    this.confirmLoading = true;
                    let err, values = await this.form.validateFields();
                    if(!err){
                        let data = await this.$post('api/user/login', values)
                        this.$store.commit('setLoginUser', data)
                    }
                    this.confirmLoading = false;
                    this.$emit('finished')
                }catch (e) {
                    this.confirmLoading = false;
                }
            },
            handleCancel(e) {
                this.$emit('finished')
            },
        },
    };
</script>
